<template>
  <div class='wrap' ref='wrap'>
    <div class="wrapson" >
      <div class="shop-name clearfix">
        <div class="shop-nameleft">
          <h3>{{data.name}}</h3>
          <i class='star-on'></i>
          <i class='star-on'></i>
          <i class='star-on'></i>
          <i class='star-on'></i>
          <i class='star-off'></i>
          <span>({{data.ratingCount}})&nbsp;月售{{data.sellCount}}单</span>
        </div>
        <div class="shop-nameright">
          <i class='iconfont icon-favorite'></i> <br>
          <i>收藏</i>
        </div>
      </div>
      <div class="price-bar">
        <div class="leftbar">
          <p>起送价</p>
          <span>{{data.minPrice}}</span><span>元</span>
        </div>
        <div class="centerbar">
          <p>商家配送</p>
          <span>{{data.deliveryPrice}}</span><span>元</span>
        </div>
        <div class="rightbar">
          <p>平均配送时间</p>
          <span>{{data.deliveryTime}}</span><span>分钟</span>
        </div>
      </div>
      <div class="news">
        <h3>公告与活动</h3>
        <p>{{data.bulletin}}</p>
        <ul>
          <li v-for='item in data.supports'><i></i>{{item.description}}{{index}}</li>
         
        </ul>
      </div>
      <div class="shoppic">
        <h3>商家实景</h3>
        <div class='picwrap' ref='picloop'>
          <ul class='clearfix'>
            <li v-for='img in data.pics'>
              <img  :src='img' alt="">
            </li>
            
          </ul>
        </div>
      </div>
      <div class="shopinfo">
        <h3>商家信息</h3>
        <ul>
          <li v-for='news in data.infos'>{{news}}</li>
          
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  import BetScroll from 'better-scroll'
  export default {
    data() {
      return {
        data: {},
        obj:{name:123,age:456,ak:789}
      }
    },

    created: function () {
      this.$http.get('http://localhost:8080/api/getSeller')
        .then(function (res) {
          if (res.body.status !== 0) {
            console.log(res.body.data)
            //  拿到数据赋值给data保存数据
            this.data = res.body.data
            
            // 拿到所有价钱存入数组
            this.$nextTick(() => { // 3 在这个函数中调用以防内容还未加载完就执行，获取不到元素的高度导致无法滑动
              this.warpHeight()
              this._initScroll()
               this.picScroll = new BetScroll(this.$refs.picloop, {
                 scrollX: true,
               })
            })

          }

        })
    },
    methods: {
      // 计算高度滚动父元素的高度
      warpHeight() {
        let hei = screen.height - 205
        this.$refs.wrap.style.height = hei + 'px'

      },
      _initScroll() { // 2 函数声明

        this.ratingsScroll = new BetScroll(this.$refs.wrap, {})
       
      }
    }

  }

</script>
<style scoped>
  .wrap {
    background: #f3f5f7;
    overflow: hidden;
  }
  
  .shop-name {
    padding: 15px;
    background: #fff;
  }
  
  .shop-name .shop-nameleft {
    box-sizing: border-box;
    float: left;
    line-height: 25px;
  }
  
  .shop-name .shop-nameleft i {
    margin-right: -7px;
  }
  
  .shop-name .shop-nameleft span {
    font-size: 10px;
  }
  
  .shop-name .shop-nameright {
    float: right;
  }
  
  .shop-name .shop-nameleft h3 {
    color: #000;
    font-weight: 500;
  }
  
  .shop-name .shop-nameleft .star-on {
    vertical-align: middle;
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(../images/xx.png) no-repeat;
    background-size: 15px 15px;
  }
  
  .shop-name .shop-nameleft .star-off {
    vertical-align: middle;
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(../images/x.png) no-repeat;
    background-size: 15px 15px;
  }
  
  .shop-nameright i:first-of-type {
    color: #d4d6d9;
    font-size: 30px;
  }
  
  .price-bar {
    padding: 20px 0;
    display: flex;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    text-align: center;
    background: #fff;
  }
  
  .price-bar .leftbar {
    flex: 1;
    /*background: #000;*/
    border-right: 1px solid #ccc;
  }
  
  .price-bar .centerbar {
    flex: 1;
    border-right: 1px solid #ccc;
  }
  
  .price-bar .rightbar {
    flex: 1;
  }
  
  .price-bar p {
    color: #93999f;
    font-size: 10px;
    line-height: 0px;
  }
  
  .price-bar span {
    font-size: 24px;
    font-weight: 900;
  }
  
  .price-bar span:last-child {
    font-size: 10px;
  }
  
  .news {
    margin-top: 20px;
    padding: 15px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background: #fff;
  }
  
  .news h3 {
    font-weight: 400;
  }
  
  .news p {
    color: #f01414;
    line-height: 25px;
    padding: 0 10px;
  }
  
  .news ul li:first-of-type i {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(../images/003.png) no-repeat;
    background-size: 16px 16px;
    vertical-align: top;
  }
  
  .news ul li:nth-of-type(2) i {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(../images/004.png) no-repeat;
    background-size: 16px 16px;
    vertical-align: top;
  }
  
  .news ul li:nth-of-type(3) i {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(../images/008.png) no-repeat;
    background-size: 16px 16px;
    vertical-align: top;
  }
  
  .news ul li:nth-of-type(4) i {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(../images/005.png) no-repeat;
    background-size: 16px 16px;
    vertical-align: top;
  }
  
  .news ul li:nth-of-type(5) i {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(../images/006.png) no-repeat;
    background-size: 16px 16px;
    vertical-align: top;
  }
  
  .news ul li {
    padding: 20px 20px;
    border-top: 1px solid #ccc;
  }
  
  .shoppic {
    margin-top: 20px;
    padding: 15px;
    background: #fff;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }
  .shoppic .picwrap{
    /*width: 400px;*/
  }
  .shoppic h3 {
    font-weight: 400;
  }
  
  .shoppic ul {
    margin-top: 10px;
    box-sizing: border-box;
    width: 508px;
  }
  
  .shoppic ul li {
    float: left;
    padding-right: 7px;
  }
  
  .shoppic ul li img {
    width: 120px;
    height: 90px;
  }
  
  .shopinfo {
    margin-top: 20px;
    padding: 15px;
    background: #fff;
    border-top: 1px solid #ccc;
  }
  
  .shopinfo h3 {
    font-weight: 400;
  }
  
  .shopinfo ul {
    margin-top: 10px;
    padding: 0 20px;
  }
  
  .shopinfo ul li {
    border-top: 1px solid #ccc;
    padding: 20px 0;
  }

</style>
